// 1.引入 vue
import Vue from "vue";

// 2.引入 vux
import Vuex from "vuex";

import { queryMovieListReq } from "@/api/Movie";

// 3.使用 vuex 插件
Vue.use(Vuex);

// 4.store 配置
const state = {
  count: 0,
  movieList: [],
};

const mutations = {
  // 加
  increase(state, { amount }) {
    state.count += amount;
  },
  // 减
  decrease(state, { amount }) {
    state.count -= amount;
  },
  //一条重要的原则就是要记住 mutation 必须是同步函数,如果是异步的话,我们无法在工具中追踪数据的变化
  getMovieList(state, { list }) {
    state.movieList = list;
  },
};

const actions = {
  // action 不能直接操作数据，它是通过操作 mutations 来操作数据
  increaseIfOddAction({ state, commit }, payload) {
    // context 相当于一个小型的 $store 对象 {getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}
    if (state.count % 2 === 0) {
      commit("increase", payload); // 这个判断是同步的 可以卸载 mutations 中
    }
  },
  increaseDelayAction({ commit }, payload) {
    setTimeout(() => {
      commit("increase", payload);
    }, 500);
  },
  async getMovieListAction({ commit }) {
    // console.log(this, "this");  // this 指向 Store 对象
    const { data } = await queryMovieListReq();
    commit("getMovieList", data);
  },
};

//getters对象
// 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数等等 需要计算，我们就用到了getters 类似于vue中的计算属性
// getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
const getters = {
  //因为数据是state派生出来的，所以getters中的函数接收一个参数是state
  /* myMovieList(state) {
    return state.movieList.filter((movie) => {
      return movie.albumName.length < 7 && movie.albumName.length > 3;
    });
  }, */

  //可以传参的getters
  filtrateMovieList(state) {
    //如果计算属性在计算的时候，需要接收参数，则getters函数需要返回一个函数
    return ({ start, end }) => {
      return state.movieList.filter((movie) => {
        return movie.albumName.length <= end && movie.albumName.length >= start;
      });
    };
  },
};

// 5.创建并暴露 store 对象（仓库）
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
});
